<template>
  <div>
    <div class="ef-node-form">

      <div class="ef-node-form-body">
        <el-form ref="dataForm" :model="node" label-width="80px">
          <div class="ef-node-form-header" style="margin-bottom: 10px;">流程信息</div>
          <el-form-item label="流程名称">
            <el-input v-model="processName" />
          </el-form-item>
          <template v-show="type !== 'line'">
            <div class="ef-node-form-header" style="margin-bottom: 10px;">节点信息</div>
            <el-form-item label="节点名称">
              <el-input v-model="node.name" />
            </el-form-item>
            <el-form-item label="审核部门">
              <treeselect
                v-model="node.deptId"
                class="w-100 form-treeselect"
                placeholder="请选择审查部门"
                :multiple="false"
                :options="deptTree"
                :load-options="loadDeptTree"
                :normalizer="deptNormalizer"
                no-children-text="没有更多了"
              />
            </el-form-item>
            <el-form-item label="审核角色" prop="roleId">
              <el-select
                v-model="node.roleId"
                class="w-100"
                placeholder="请选择角色"
                @change="roleChange"
              >
                <el-option
                  v-for="item in roleList"
                  :key="item.id+'_roles_key'"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-show="false" label="left坐标">
              <el-input v-model="node.left" :disabled="true" />
            </el-form-item>
            <el-form-item v-show="false" label="top坐标">
              <el-input v-model="node.top" :disabled="true" />
            </el-form-item>
            <el-form-item v-show="false" label="ico图标">
              <el-input v-model="node.ico" />
            </el-form-item>
            <el-form-item label="审核人员">
              <el-input
                v-model="node.userName"
                readonly
                placeholder="请选择人员"
                @click.native="handleChooseUser"
              />
            </el-form-item>
            <el-form-item v-show="false" label="前置条件">
              <el-input v-model="node.where" placeholder="请输入前置条件" />
            </el-form-item>
            <el-form-item label="办理时限">
              <el-input-number v-model="node.timeLimit" class="w-100" :controls="false" aria-placeholder="请输入办理时限(小时)" />
              <!-- <el-date-picker
                v-model="node.timeLimit"
                type="datetime"
                placeholder="选择办理时限"
              /> -->
            </el-form-item>
            <div v-if="type === 'node'" style="text-align: right;">
              <!-- <el-button icon="el-icon-close">重置</el-button> -->
              <el-button type="primary" icon="el-icon-check" @click="save">保存</el-button>
            </div>
          </template>
        </el-form>
        <el-form v-show="type === 'line'" ref="dataForm" :model="line" label-width="80px">
          <div class="ef-node-form-header" style="margin-bottom: 10px;">流程信息</div>
          <div class="ef-node-form-header" style="margin-bottom: 10px;">连线信息</div>
          <el-form-item label="条件">
            <el-input v-model="line.label" />
          </el-form-item>
          <el-form-item>
            <!-- <el-button icon="el-icon-close">重置</el-button> -->
            <el-button type="primary" icon="el-icon-check" @click="saveLine">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!--<div class="el-node-form-tag"></div>-->
    </div>

    <ChooseSystemUserDialog
      ref="systemUserDialog"
      :dialog-visible="chooseUserGridVisible"
      :params="params"
      @closeDialog="()=>chooseUserGridVisible = false"
      @chooseCallback="chooseCallback"
    />

  </div>

</template>

<script>
import ChooseSystemUserDialog from '@/views/duty-management/components/ChooseSystemUserDialog'
import { cloneDeep } from 'lodash'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
import { getTree as getDeptTree } from '@/api/system/system_dept'
import { getList as getRoleList } from '@/api/system/role'

export default {
  components: {
    ChooseSystemUserDialog, Treeselect
  },
  data() {
    return {
      visible: true,
      chooseUserGridVisible: false,
      // 部门和角色
      params: {
        roleId: '',
        deptId: ''
      },
      // node 或 line
      type: '',
      // 流程名称
      processName: '',
      // 单个节点信息
      node: {
        roleId: null,
        userName: '',
        userId: '',
        deptId: undefined
      },
      // 单条线信息
      line: {},
      // 流程数据
      data: {},
      stateList: [
        { state: 'success', label: '成功' },
        { state: 'warning', label: '警告' },
        { state: 'error', label: '错误' },
        { state: 'running', label: '运行中' }
      ],
      // 部门树
      deptTree: null,
      deptNormalizer(node) {
        let result = {
          id: node.id, label: node.name,
          children: node.children || null
        }
        if (!node.children) { result = { id: node.id, label: node.name } }
        return result
      },
      roleList: []
    }
  },
  watch: {
    // 监听deptId
    'node.deptId': 'currDeptChange'
  },
  created() {
    this.initRoleList()
  },
  mounted() {

  },
  methods: {
    initRoleList() {
      // 查询角色列表
      getRoleList({ page: 0, size: 9999 }).then(result => {
        this.roleList = result
      })
    },
    roleChange(val) {
      console.log(val)
      this.node.roleId = val
      this.$set(this.node, 'roleId', val)
      this.params.roleId = val
      //  清空
      this.node.userId = ''
      this.node.userName = ''
    },
    currDeptChange(val) {
      this.params.deptId = val
      this.params.roleId = ''
      this.node.roleId = ''
      this.node.userId = ''
      this.node.userName = ''
    },
    handleChooseDept() {

    },
    deptCallback(data) {

    },
    handleChooseUser() {
      this.chooseUserGridVisible = true
    },
    chooseCallback(data) {
      const { nickName, id } = data
      this.node.userId = id
      this.node.userName = nickName
      this.$set(this.node, 'userId', id)
      this.$set(this.node, 'username', nickName)
    },
    /**
     * 表单修改，这里可以根据传入的ID进行业务信息获取
     * @param data
     * @param id
     */
    nodeInit(data, id) {
      this.type = 'node'
      this.data = data
      console.log(data)
      data.nodeList.filter((node) => {
        if (node.nodeId === id) {
          console.log(node)
          this.node = {
            ...cloneDeep(node)
          }
          setTimeout(() => {
            this.node.roleId = node.roleId
            setTimeout(() => {
              this.node.userName = node.userName
              this.node.userId = node.userId
            }, 100)
          }, 100)
        }
      })
    },
    lineInit(line) {
      this.type = 'line'
      this.line = line
    },
    getProcessName() {
      return this.processName
    },
    // 修改连线
    saveLine() {
      this.$emit('setLineLabel', this.line.from, this.line.to, this.line.label)
    },
    async loadDeptTree({ action }) {
      if (action === LOAD_ROOT_OPTIONS) {
        getDeptTree().then(result => {
          var res = JSON.parse(JSON.stringify(result))
          var data = res.content
          function exec(array) {
            array.forEach(item => {
              if (!item.children || item.children.length === 0) {
                delete item.children
              } else {
                exec(item.children)
              }
            })
          }
          exec(data)
          this.deptTree = data
        })
      }
    },
    save() {
      this.data.nodeList.filter((node) => {
        if (node.nodeId === this.node.nodeId) {
          node.name = this.node.name
          node.left = this.node.left
          node.top = this.node.top
          node.ico = this.node.ico
          node.state = this.node.state
          node.userId = this.node.userId
          node.userName = this.node.userName
          node.timeLimit = this.node.timeLimit
          node.where = this.node.where
          node.deptId = this.node.deptId
          node.deptName = this.node.deptName
          node.roleId = this.node.roleId
          this.$emit('repaintEverything')
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .el-node-form-tag {
    position: absolute;
    top: 50%;
    margin-left: -15px;
    height: 40px;
    width: 15px;
    background-color: #fbfbfb;
    border: 1px solid rgb(220, 227, 232);
    border-right: none;
    z-index: 0;
  }
  .form-treeselect.vue-treeselect{
    font-size: 12px !important;
  }
  .form-treeselect.vue-treeselect .vue-treeselect__single-value{
    padding-left: 10px;
  }

</style>
